<template>
	<view>
		<view class="top">
			<view class="search">
				<button @tap="search">+好友</button>
				<input type="text" value="" v-model="search_txt" placeholder="搜索好友"/>
			</view>
		</view>
		  <view class="cu-list menu-avatar  card-menu martop" >

		    <view class="cu-item" v-for="(item,index) in lists" :key="index" @tap="toChat(index)">

				<image class="cu-avatar round lg " :src='item.icon'></image>


		      <view class="content">
		        <view class="text-grey">
		          <text class="text-cut">{{item.friend_name}}</text>
<!-- 		          <view class="cu-tag round bg-orange sm">战士</view> -->
		        </view>
		        <view class="text-gray text-sm flex">
		          <text class="text-cut">{{item.msgs[item.msgs.length-1].content}}</text>
		        </view>
		      </view>
		      <view class="action">
<!-- 		        <view class="text-grey text-lg chat" @tap="toChat(index)">
					<text>聊天</text>
				</view> -->
		        <view class="cuIcon-notice">{{item.msgs.length}}</view>
		      </view>
		    </view>
		  </view>
		<!-- 聊天消息end -->
	</view>
</template>

<script>
	import store from '../../globalStore/store.json'
	import data from '../../datas/data.json'
	export default {
		data() {
			return {
				lists:[],
				search_txt:""
			}
		},
		onLoad() {
			this.lists=store.chat_datas;
		},
		onShow() {

			uni.setTabBarBadge({
			  index: 3,
			  text: store.chats_count.toString()
			})
		},
		methods: {
			toChat:function(index){
				console.log(this.lists[index]);
				let icon=this.lists[index].icon;
				uni.navigateTo({
					url:"msg_chat/msg_chat?friend_id="+this.lists[index].friend_id+"&friend_name="+this.lists[index].friend_name+"&icon="+this.lists[index].icon
				})
			},
			search(){
				uni.navigateTo({
					url:"../my/search-users/search-users?user_name="+this.search_txt
				})
				this.search_txt="";
			}
		}
	}
</script>

<style scoped>
	.icon{
		width: 50px;
		height: 50px;
		border-radius: 50px 50px;
	}
	.chat{
		background: #4C9CFD;
		color: white;
	}
	.search{
		margin-top: 5%;
		margin-bottom: 3%;
		margin-left: 5%;
		display: flex;
		
	}
	.search button{
		margin: 0;
		width: 84px;
		height: 37px;
		font-size: 15px;
		border-radius: 0px 0px;
		background: #4CD964;
		color: #FFFFFF;
	}
	.search input{
		padding: 1%;
		background: rgba(255, 255, 255, 1);
		width: 70%;
		height: 37px;
		color: black;
	}	
</style>
